import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
} from '@fast-crud/fast-crud';

import { ref } from 'vue';

import { dict } from '@fast-crud/fast-crud';

import { DefDatasourceConfigApi } from '#/api';
import { DefGenTableApi } from '#/api/devOperation/developer/defGenTable';
import { $t } from '#/locales';
import { indexColumn } from '#/plugins/fast-crud/common';

export function createCrudOptions(
  props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  const selectedRowKeys = ref<string[]>([]);

  return {
    selectedRowKeys,
    crudOptions: {
      container: {
        is: 'fs-layout-card',
      },
      request: {
        pageRequest: DefGenTableApi.pageTableRequest,
      },
      actionbar: { buttons: { add: { show: false } } },
      table: {
        striped: true,
        rowKey: 'name',
        rowSelection: {
          type: 'checkbox',
          selectedRowKeys,
          onChange: (changed: string[]) => {
            selectedRowKeys.value = changed;
          },
        },
      },
      rowHandle: { show: false },
      columns: {
        ...indexColumn(props.crudExpose),
        dsId: {
          title: $t('devOperation.developer.defGenTable.name'),
          type: 'dict-select',
          column: { show: false },
          search: { show: true },
          dict: dict({
            value: 'id',
            label: 'name',
            immediate: false,
            onReady(context) {
              const dsId = context.dict?.data?.[0]?.id;
              context.form.dsId = dsId;
              context.doSearch();
            },
            async getData() {
              return await DefDatasourceConfigApi.query({});
            },
          }),
        },
        name: {
          title: $t('devOperation.developer.defGenTable.name'),
          type: 'text',
          search: { show: true },
        },
        comment: {
          title: $t('devOperation.developer.defGenTable.comment'),
          type: 'text',
          search: { show: true },
        },
      },
    },
  };
}

export const frontRules = {
  addForm: {
    rules: {},
  },
  editForm: {
    rules: {},
  },
};
